<template>
  <view class="expressage">
    <view class="msg">
      <image src="/static/img/logo2.png"/>
      <view>
        <view class="view-p">圆通快递</view>
        <view class="view-p">单号: 56985665454</view>
      </view>
    </view>
    <view class="cut-off"></view>
    <view class="flow">
      <view class="ul">
        <view class="active li">
          <view class="view-p">客户签收人:李宏伟已签收</view>
          <view class="time">2018.07.24 14:20</view>
        </view>
        <view class="li">
          <view>客户签收人:李宏伟已签收</view>
          <view class="time">2018.07.24 14:20</view>
        </view>
        <view class="li">
          <view>客户签收人:李宏伟已签收</view>
          <view class="time">2018.07.24 14:20</view>
        </view>
        <view class="li">
          <view>客户签收人:李宏伟已签收</view>
          <view class="time">2018.07.24 14:20</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="less" scoped>
.expressage {
  height: 100%;
  background: #fff;
  .msg {
    display: flex;
    padding: 20rpx;
    image {
      width: 90rpx;
      height: 90rpx;
    }
    view {
      padding: 5rpx 20rpx;
      .view-p {
        font-size: 28rpx;
        line-height: 40rpx;
      }
    }
  }
  .flow {
    .ul {
      border-left: 1rpx solid #eeeeee; /*no*/
      margin-left: 30rpx;
      .li {
        position: relative;
        margin: 39rpx 20rpx 39rpx 20rpx;
        font-size: 28rpx;
        color: #999;
        line-height: 40rpx;
        .time {
          font-size: 24rpx;
        }
      }
      .li::before {
        content: "";
        position: absolute;
        left: -20rpx;
        top: 50%;
        width: 10rpx;
        height: 10rpx;
        background: #eeeeee;
        border-radius: 50%;
        transform: translate(-50%, -50%);
      }
      .li:nth-last-child(1)::after {
        content: "";
        position: absolute;
        top: 50%;
        left: -30rpx;
        width: 10rpx;
        height: 50%;
        margin-top: 5rpx;
        background: #fff;
      }
      .active {
        color: #bd3c8c;
      }
      .active::after {
        content: "";
        position: absolute;
        bottom: 50%;
        left: -30rpx;
        width: 10rpx;
        height: 50%;
        margin-bottom: 5rpx;
        background: #fff;
      }
      .active::before {
        background: #faafdd;
        border: 9rpx solid #bd3c8c;
        transform: translate(-50%, -50%);
        z-index: 1;
      }
    }
  }
}
</style>
